import { Input } from "antd"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
import { notAllowSpecialCharacters } from "@/utils/validate"

interface Props {
	inputProps?: object
	onChange?: (text: string) => void
}

// eslint-disable-next-line react/prop-types
const TableCodeInput: React.FC<Props> = ({ onChange, inputProps }) => {
	const { formatMessage } = useLocale()
	const onNotAllow = (value: string) => {
		onChange && onChange(value)
	}

	return (
		<SFormItem name="tableCode" label={formatMessage({ id: "dxn.card_ables_list.table_id" })}>
			<Input
				allowClear
				placeholder={formatMessage({ id: "dxn.card_ables_list.table_id_placeholder" })}
				onChange={e => notAllowSpecialCharacters(e, onNotAllow)}
				{...inputProps}
			/>
		</SFormItem>
	)
}

export default TableCodeInput
